<template>
  <div>
    <a-modal width="570px" :mask="false" :visible="visible" @ok="handleOk" @cancel="closeDialog">
      <template #title>
        <div ref="modalTitleRef" style="width: 100%">{{ "设置" }}</div>
      </template>
      <template #modalRender="{ originVNode }">
        <div :style="transformStyle">
          <component :is="originVNode" />
        </div>
      </template>
      <a-form :model="formState" layout="horizontal" name="formState" autocomplete="off">
        <!-- 并行任务 -->
        <a-row>
          <a-col :span="4">
            <a-form-item label="并行任务">
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="下载并行任务数" name="downloadconcount" style="width: 200px">
              <a-input-number :max="10" :min="1" v-model:value="formState.downloadconcount" size="small" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="上传并行任务数" name="uploadcontcount" style="width: 200px">
              <a-input-number :max="10" :min="1" v-model:value="formState.uploadcontcount" size="small" />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 传输速度 -->
        <a-row>
          <a-col :span="4">
            <a-form-item label="传输速度"></a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="下载">
              <a-radio-group v-model:value="formState.dlIsLimit" style="display: flex; justify-content: space-between">
                <a-radio :value="false">不限速</a-radio>
                <a-radio :value="true">限速为</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item>
              <a-input-number v-model:value="formState.downloadtransrate" size="small" style="width: 130px;"
                addonAfter="KB/s" :disabled="!formState.dlIsLimit" :min="128"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row style="margin-top: -20px">
          <a-col :span="4"></a-col>
          <a-col :span="12">
            <a-form-item label="上传">
              <a-radio-group v-model:value="formState.ulIsLimit" style="display: flex; justify-content: space-between">
                <a-radio :value="false">不限速</a-radio>
                <a-radio :value="true">限速为</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item>
              <a-input-number v-model:value="formState.uploadtransrate" size="small" style="width: 130px;"
                addonAfter="KB/s" :disabled="!formState.ulIsLimit" :min="128"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 下载位置 -->
        <a-row>
          <a-col :span="20">
            <a-form-item label="下载文件位置选择" name="downloadPath"></a-form-item>
          </a-col>
        </a-row>
        <a-row style="margin-top: -20px">
          <a-col :span="18">
            <a-form-item name="downloadPath" :rules="[{ required: true, message: '请选择下载位置', trigger: 'blur' }]">
              <a-input v-model:value="formState.downloadPath" size="small"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item>
              <!-- webkitdirectory: 选择文件夹 -->
              <input ref="inputRef" type="file" v-show="false" @change="changeFile" webkitdirectory>
              <a-button size="small" class="text" @click="lookFile">浏览</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { Draggable } from "@/mixins/DraggableMixin"
export default {
  mixins: [Draggable],
  data() {
    return {
      visible: true,
      formState: {
        dlIsLimit: false, // 下载是否限制
        ulIsLimit: false, // 上传是否限制
        downloadconcount: 3, // 下载并行数
        uploadcontcount: 3, // 上传并行数
        downloadtransrate: null, // 下载速度
        uploadtransrate: null, // 上传速度 
        downloadPath: "", // 下载位置
      }
    }
  },
  methods: {
    async lookFile() {
      const path = await window.versions.setDownloadPath()
      if (path) this.formState.downloadPath = path
    },
    async handleOk() {
      const form = this.formState
      if (form.dlIsLimit && !form.downloadtransrate) return message.warning('请输入限制的下载速度')
      if (form.ulIsLimit && !form.uploadtransrate) return message.warning('请输入限制的上传速度')
      await window.versions.setConfig(JSON.stringify(this.formState))
      this.closeDialog()
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    changeFile(e) {
      console.log('e', e)
      const file = e.target.files[0]
      console.log('file', file)

      // 将文件处理操作放入异步任务
      setTimeout(() => {
        const webkitRelativePath = file.webkitRelativePath;
        const directoryPath = webkitRelativePath.split('/')[0];

        // 使用目录路径来截取path中的目录部分
        const path = file.path;
        const indexOfDirectory = path.indexOf(directoryPath);
        const directoryPart = path.substring(0, indexOfDirectory + directoryPath.length);

        console.log('截取', directoryPart)
        this.formState.downloadPath = directoryPart
        console.log(this.formState.downloadPath);
        // 重置文件输入框的值以便下次使用
        this.$refs.inputRef.value = null
      }, 0); // 使用0毫秒延迟，将操作推入事件队列中，以避免阻塞主线程
    },
    async getTransSetting() {
      const res = await window.versions.getConfig()
      this.formState = res
    }
  },
  created() {
    this.getTransSetting()
  }
}
</script>

<style scoped>
.text {
  font-size: 12px;
  padding: 0 20px;
  margin-left: 10px
}
</style>